<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 盒子模型（box model）内容区（content）内边距(padding) 边框(border) 外边距(margin) -->
		<!-- css将页面中所有元素设置成了一个矩形盒子 -->
		<div class="box1">
			<div class="inner"></div>
		</div>
<!-- 		<div class="box2">
		</div> -->
	</body>
</html>
<style type="text/css">
	.box1 {
		/* 内容区：元素中所有子元素和文本内容都在内容区中 */
		width: 200px;
		height: 200px;
		background-color: #FF0000;
		/* 边框：属于盒子边缘，边框属于盒子内部，除了边框都是盒子外部 */
		/* border-width默认值 3px*/
		/* border-width可以指定四个方向边框长度 顺序上 右 下 左*/
		border-width: 10px 20px 30px 40px;
		/* border-color默认值 color颜色*/
		/* border-color同样可以指定四个边框 */
		border-color: yellow #0000FF #7FFFD4 antiquewhite;
		/* border-style solid表示实线 dotted点状虚线 dashed线状虚线 double双线 */
		border-style: solid;
		/* 内边距：内容区和边框之间的距离,会影响到盒子的大小 */
		/* 背景颜色会延伸到内边距上 */
		/* 一个盒子可见框大小，由内容区，内边距，边框共同决定。在计算盒子大小时，要将这三个区域加到一起计算 */
		padding: 100px;
		/* 外边距：不会影响盒子可见框大小，但是会影响盒子的位置 */
		/* margin会影响盒子实际占用空间大小 */
		/* 一共有四个方向的外边距  margin-top margin-right margin-left margin-bottom*/
		/* 元素在页面中按照自左向右顺序排列，所以默认情况下设置了左和上外边距会移动元素自身 ，设置下和右外边距会设置其他元素*/
		margin-top: 100px ;
		margin-left: 100px;
		/* margin也可以设置负值 */
		/* margin-top: -100px ; */
	}
	.inner{
		width: 100%;
		height: 100%;
		background-color: #FFFF00;
	}
/* 	.box2{
		width: 200px;
		height: 200px;
		background-color: #bfc;
	} */
</style>
